<template>
    <div class="page-container page-customerManage">
        <!-- <div class="refresh-btn">
            刷新
        </div> -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="全部" name="0">
            </el-tab-pane>
            <el-tab-pane label="普通用户" name="1">
            </el-tab-pane>
            <el-tab-pane label="企业管理员" name="2">
            </el-tab-pane>
        </el-tabs>
        <div class="user-manager">
            <div class="operations">
                <div class="operation-btns">
                    <!-- <div :class="{'disabled': multipleSelection.length === 0}">移至成员</div>
                    <div :class="{'disabled': multipleSelection.length === 0}">移至共享</div> -->
                    <div @click="exportToExcel">全部导出</div>
                </div>
                <div class="search-user">
                    <el-input v-model="searchKey" class="search-input" placeholder="请输入姓名或电话用户" style="width: 200px;"></el-input>
                    <div class="search-btn" @click="search">查询</div>
                </div>
            </div>
            <el-table
                :data="userList"
                border
                tooltip-effect="dark"
                style="width: 100%;"

                @selection-change="handleSelectionChange">
                <!-- 多选框 -->
                <!-- <el-table-column
                type="selection"
                width="55">
                </el-table-column> -->
                <el-table-column
                label="编号"
                align="center"
                width="70">
                    <template slot-scope="scope">
                        <div>{{ scope.row.cardId }}</div>
                    </template>
                </el-table-column>
                <el-table-column
                prop="name"
                align="center"
                label="姓名"
                width="100">
                </el-table-column>
                <el-table-column
                prop="phone"
                align="center"
                width="150"
                label="手机号码">
                </el-table-column>
                <el-table-column
                prop="personalWx"
                label="微信号码"
                align="center"
                width="150">
                </el-table-column>
                <el-table-column
                prop="companyName"
                align="center"
                label="所属企业">
                </el-table-column>
                <el-table-column
                prop="position"
                align="center"
                label="职位"
                width="150">
                </el-table-column>
                <el-table-column
                prop="seeNum"
                align="center"
                label="名片访问量"
                width="120">
                </el-table-column>
                <el-table-column
                align="center"
                label="创建时间"
                width="150">
                    <template slot-scope="scope">
                        <div>{{ scope.row.createTime | formatDateMin }}</div>
                    </template>
                </el-table-column>
                <el-table-column
                label="操作"
                align="center"
                width="80">
                    <template slot-scope="scope">
                        <div style="text-align: center;">
                            <!-- <el-button class="deleteCard" disabled @click="deleteCard(scope.row.cardId)" type="text" size="medium">删除</el-button> -->
                            <el-button class="checkCard" @click="checkCard(scope.row.cardId)" type="text" style="color: #51cdcb;" size="medium">详情</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page">
            <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="pageNum"
            :page-sizes="[10]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { selectCustomerListApi, selectCustomerListExportApi } from '@/api/api.js';
import { getCookie } from '@/utils/util.js'
import { serverUrl } from "@/utils/server.js";
const Qs = require('qs');
export default {
    data() {
        return {
            searchKey: '',
            lastSearchKey: '',
            multipleSelection: [],
            activeName: '0',
            userList: [],
            total: 0,
            pageNum: 1
        };
    },
    created() {
        this.getCustomerList();
    },
    mounted() {
        
    },
    methods: {
        getCustomerList() {
            let params = {
                pageNum: this.pageNum,
                name: this.searchKey
            }
            if (this.activeName !== '0') {
                params.userType = this.activeName
            }
            selectCustomerListApi(params).then(res => {
                if (res.code == 200) {
                    this.total = res.data.pageInfo.total;
                    this.userList = res.data.pageInfo.list;
                    this.lastSearchKey = params.name;
                } else {
                    this.userList = [];
                    this.$message({
                        message: res.message,
                        type: 'warning'
                    });
                }
            }).catch(err => {
                this.userList = [];
            })
        },
        // 改变类别
        handleClick(tab, event) {
            this.pageNum = 1
            this.searchKey = ''
            this.lastSearchKey = ''
            this.userList = []
            this.getCustomerList();
        },
        // 页面变更
        handleCurrentChange () {
            this.getCustomerList();
        },
        search () {
            this.getCustomerList();
        },
        // 多选数据改变
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        deleteCard (id) {
        },
        checkCard (id) {
            this.$router.push({path: "/cardPage", query: {id: id}})
        },
        // 导出
        exportToExcel () {
            let params = {
                name: this.searchKey
            }
            if (this.activeName !== '0') {
                params.userType = this.activeName
            }
            //  配置请求头
            let headers = new Headers()
            headers.append('token', getCookie('token'))
            headers.append('Content-Type', 'application/x-www-form-urlencoded')
            fetch(serverUrl.baseURL + 'businessCard/selectCustomerListExport', {
                headers: headers,
                method: 'POST',
                body: Qs.stringify(params)
            }).then(res=>{
                return res.blob();
            }).then(res=>{
                let link = document.createElement('a');
                let url = window.URL.createObjectURL(res);
                link.href = url;
                link.download = '用户列表.xls';

                link.click();
                window.URL.revokeObjectURL
            });
        }
    }
}
</script>
<style lang="scss">
.page-customerManage{
    background: #fff;
    min-height: calc(100vh - 150px);
    position: relative;
    .refresh-btn{
        position: absolute;
        top: 20px;
        right: 20px;
        color: #fff;
        height: 32px;
        width: 68px;
        cursor: pointer;
        color: #fff;
        border-radius: 4px;
        text-align: center;
        line-height: 32px;
        background: #51CDCB;
        position: absolute;
        z-index: 999;
    }
    .el-tabs__item{
        height: 74px;
        line-height: 74px;
    }
    .page{
        padding: 10px 0;
        text-align: center;
    }
    .user-manager{
        padding: 0 20px;
        .operations{
            display: flex;
            justify-content: space-between;
            height: 60px;
            align-items: center;
            .operation-btns{
                display: flex;
                div{
                    border-radius: 4px;
                    // background: #B9EBEA;
                    background: #51CDCB;
                    font-size: 14px;
                    line-height: 30px;
                    height: 30px;
                    color: #fff;
                    padding: 0 20px;
                    margin-right: 10px;
                    cursor: pointer;
                }
                .disabled{
                    background: #B9EBEA;
                }
            }
            .search-user{
                display: flex;
                .search-input{
                    height: 30px;
                    margin-right: 10px;
                    .el-input__inner{
                        height: 30px;
                    }
                }
                .search-btn{
                    border-radius: 4px;
                    // background: #B9EBEA;
                    background: #51CDCB;
                    font-size: 14px;
                    line-height: 30px;
                    height: 30px;
                    color: #fff;
                    padding: 0 20px;
                    cursor: pointer;
                }
                .disabled{
                    background: #B9EBEA;
                }
            }
        }
    }
}
</style>
